<template>
    <div >
    <template v-if="type=='dropDown'">
    <el-select filterable :disabled="disabled" v-model="model"  size="small" placeholder="请选择" @change="changed1">
        <el-option
                v-for="item in list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="disabled"
        >
        </el-option>
    </el-select>
    </template>
    <template v-else-if="type=='multiDropDown'">
    <el-select filterable :disabled="disabled" multiple v-model="model"  size="small" placeholder="请选择" @change="changed2">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="disabled"
        >
        </el-option>
    </el-select>
    </template>
        <template v-else-if="type=='netDropDown'">
            <el-select filterable :disabled="disabled" v-model="model"  size="small" placeholder="请选择" @change="changed3">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="disabled"
                >
                </el-option>
            </el-select>
        </template>
        <template v-else-if="type=='multiNetDropDown'">
            <el-select filterable :disabled="disabled" multiple  size="small" v-model="model" placeholder="请选择" @change="changed4">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="disabled"
                >
                </el-option>
            </el-select>
        </template>
    </div>
</template>
<script>
import {loadDropDown} from "./request";   
export default {
    name: 'XDSelecter',
    props: ['value','placeholder', 'list', 'type', 'link', 'disabled'], //multiNetDropDown netDropDown dropDonw multiDropDown
    data() {
        return {
            // 下拉
            options: [],
            model: "",
            select: {
                url: '/devicetype/getList',
                method: 'POST',
                mineId: false,
                companyId: false,
                label: 'deviceTypeName',
                value: 'deviceTypeId',
                data: []
            },
        }
    },
    created() {
        if (this.type == 'dropDown') {
            this.init1()
        } else if (this.type == 'multiDropDown') {
            this.init2()
        } else if (this.type == 'netDropDown') {
            this.init3()
        } else if (this.type == 'multiNetDropDown') {
            this.init4()
        }
    },
    methods: {
        // 下拉
        changed1(val) {
            this.$emit("input", val)
            this.$emit("change", null)
            let obj = {}
            if(this.link) {
                obj[this.link] = val
                this.$store.state.xdLink = obj
            }
        },
        init1() {
            this.model = this.value
        },
        update1() {
            this.model = this.value
        },
        // 多选下拉
        changed2() {
        },
        init2() {
        },
        update2() {
        },
        // 网络下拉
        changed3(val) {
            this.$emit("input", val)
            this.$emit("change", null)
            let obj = {}
            if(this.link) {
                obj[this.link] = val
                this.$store.state.xdLink = obj
            }
        },
        init3() {
            //this.selectFunc()
            this.update3()
        },
        update3() {
            this.model = this.value
        },
        // 网络多选下拉
        changed4() {
            var temp = ''
            for(var i=0;i<this.model.length;i++) {
                if (i==0) {
                    temp += this.model[i]
                }else{
                    temp += ','
                    temp += this.model[i]
                }
            }
            this.$emit("input", temp)
            this.$emit("change", null)
        },
        init4() {
            //this.selectFunc()
            this.update4()
        },
        update4() {
            this.model = []
            if (this.value ==''||this.value==null) {
                return
            }else if (this.value.indexOf(',')>=0) {
                let split = this.value.split(',')
                for(var i=0;i<split.length;i++){
                    this.model[i] = this.num(split[i].toString())
                }
            }else {
                this.model[0] = this.num(this.value)
            }
        },
        num(str) {
           let number = Number(str)
           if (!isNaN(number)) {
               return number
           } else {
                return str
           }
        },
        // 查询
        // selectFunc() {
        //     this.select = this.list
        //     let requestJson = this.select
        //     if(requestJson.mineId) {
        //         requestJson.data.mineId = this.$store.state.mineId
        //     }
        //     if(requestJson.companyId) {
        //         requestJson.data.companyId = this.$store.state.companyId
        //     }
        //     loadDropDown(requestJson).then(response=>{
        //         let list = ""
        //         if (response.data.list) {
        //             list = response.data.list
        //         } else {
        //             list = response.data
        //         }
        //         let a = list.map(item=>({
        //             label: item[this.select.label],
        //             value: item[this.select.value]
        //         }))
        //         this.options = a
        //     }).catch(error => {
        //         console.log(error)
        //     })
        // },
    },
    watch: {
        value: function () {
            if (this.type == 'dropDown') {
                this.update1()
            } else if (this.type == 'multiDropDown') {
                this.update2()
            } else if (this.type == 'netDropDown') {
                this.update3()
            } else if (this.type == 'multiNetDropDown') {
                this.update4()
            }
        },
    }
}
</script>